<template>
  <div class="road">
    <i class="iconfont icon-road" @click="showRoad"></i>
    <div class="title">路况</div>
    <i class="iconfont icon-layer" @click="showToggle = true"></i>
    <div class="title">图层</div>
  </div>

  <van-popup
    v-model:show="showToggle"
    position="bottom"
    :style="{ height: '20%' }"
  >
    <div class="box">
      <div class="vector" @click="toggleMap('vector')">
        <i class="iconfont icon-vector"></i>
        <div>矢量图</div>
      </div>
      <div class="raster" @click="toggleMap('raster')">
        <i class="iconfont icon-satellite"></i>
        <div>卫星图</div>
      </div>
      <div class="cube" @click="showMapBox">
        <i class="iconfont icon-cube"></i>
        <div>3D图</div>
      </div>
    </div>
  </van-popup>
</template>
<script setup>
import { useSiderBar } from "./hooks/useSiderBar"
import { useToggleLayer } from "./hooks/useToggleLayer"
const { showRoad } = useSiderBar()
const { showToggle, toggleMap,showMapBox } = useToggleLayer()
</script>
<style lang="stylus" scoped>
@import 'http://at.alicdn.com/t/c/font_3793112_j647ts1vom8.css'
.road
  position fixed
  z-index 9
  top 100px
  right 10px
  font-size 12px
  text-align center
  background-color #fff
  padding 5px 2px
  border-radius 15px
  color #333
  i
    font-size 30px
    color #333
  .title
    margin-bottom 6px
.van-popup
  .box
    display flex
    justify-content space-evenly
    margin-top 25px
    color #333
    i
      font-size 40px
    .vector
      i
        color #8cc265
    .raster
      i
        color #3d7fbf
    .cube
      i
        color #a99890
</style>
